<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>微物购</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
    <link rel="stylesheet" type="text/css" href="css/hurst.css"/>
    <link rel="stylesheet" type="text/css" href="city/city.css">
    <link rel="icon" href="http://wb.boqibao.com/favicon2.ico">
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="script/home_ban.js"></script>
    <script type="text/javascript" src="script/eg_top_search.js"></script>
    <script type="text/javascript" src="script/city.js"></script>
    <script type="text/javascript" src="script/snncar.js"></script>

    <!--引入vue和Axios.js 先导入vue  再导入axios -->
    <script src="plugins/vue/dist/vue.js"></script>
    <script src="plugins/axios/dist/axios.js"></script>
    <script src="script/main.js"></script>


    <script type="text/javascript">
        $(function () {
            $('.navmenu li').hover(function () {
                $('span', this).stop().css('height', '2px');
                $('span', this).animate({
                    left: '0',
                    width: '100%',
                    right: '0'
                }, 200);
            }, function () {
                $('span', this).stop().animate({
                    left: '50%',
                    width: '0'
                }, 200);
            });
        });
    </script>
    <!--导航登陆网页版下拉-->
    <script type="text/javascript">
        $(function () {
            var setTime;
            $(".egc-top .nav-cent .operate").hover(function () {
                var _this = $(this);
                setTime = setTimeout(function () {
                    _this.find(".sec-version").slideDown(200);
                    _this.find("i").removeClass("icon-angle-down").addClass("icon-angle-up");
                }, 200);
            }, function () {
                if (setTime) {
                    clearTimeout(setTime);
                }
                $(".egc-top .nav-cent .sec-version").slideUp(200);
                $(".egc-top .nav-cent .operate i").removeClass("icon-angle-up").addClass("icon-angle-down");
            });
        });
    </script>
    <!--底部信息下拉-->
    <script type="text/javascript">
        $(function () {
            var wind_wd = $(window).width();
            if (wind_wd <= 735) {
                /* $submenu.first().delay(400).slideDown(700);*/
                $('.relate .tit').on('click', function () {
                    $(this).next('.con').slideToggle()
                    $(this).parent().siblings('.items').find('.con').slideUp();
                });
            } else {
                $('.relate .tit').unbind("click");
                $('.relate .con').show();
            }
            $(window).resize(function () {
                var wind_wd = $(window).width();
                if (wind_wd <= 735) {
                    /* $submenu.first().delay(400).slideDown(700);*/
                    $('.relate .tit').on('click', function () {
                        $(this).next('.con').slideToggle()
                        $(this).parent().siblings('.items').find('.con').slideUp();
                    });
                } else {
                    $('.relate .tit').unbind("click");
                    $('.relate .con').show();
                }
            });
        });
    </script>
    </script>
    <!--下拉导航关闭-->
    <script type="text/javascript">
        $(function () {
            $('.menu-mb i').click(function () {
                $(".navigation-mb-list").slideDown(300);
            });
            $('.navigation-mb-list .list-close-btn').click(function () {
                $(".navigation-mb-list").slideUp(300);
            });
        });
    </script>
    <!--stress搜索关闭-->
    <script type="text/javascript">
        $(function () {
            var setTime;
            $(".sercat .weixin").hover(function () {
                setTime = setTimeout(function () {
                    $(".sercat .wxewm").show();
                }, 300);
            }, function () {
                if (setTime) {
                    clearTimeout(setTime);
                }
                $(".sercat .wxewm").hide();
            });
        });
    </script>
    <script type="text/javascript">
        $(function () {
            var scroll_heitht = $('body').offset().top;
            var isShow = true;
            $(window).scroll(function () {
                if ($(window).scrollTop() > scroll_heitht && isShow) {
                    $('.stress-search-box').slideDown(200);
                } else {
                    $('.stress-search-box').slideUp(200);
                }
            });
            $('.stress-close a').click(function () {
                isShow = false;
                $('.stress-search-box').slideUp(200).unbind(window, aa);
            });
        });
    </script>
</head>
<body>
<div id="contact">
    <div class="clear_fix"></div>
    <div class="stress-search-box row">
        <div class="stress-close"><a href="javascript:;"></a></div>
    </div>
    <div class="clear_fix"></div>
    <!-- 客服中心 -->

    <div class="mebBox">
        <div class="meb-cont clearfix mainbox">
            <div class="meb-nav fl dInline">
                <ul class="clearfix">
                    <li class=""><a href="index.html">首页</a></li>
                    <li class="on"><a href="contactCustomer.html">联系客服</a></li>
                </ul>
            </div>
            <div class="meb-right fr dInline">
                <div class="mr-top">
                    <div class="mr-top-div clearfix">
                        <span class="fl">
                            <img src="images/photo.png">
                        </span>
                        <div class="mr-infor fl dInline">
                            <h2>尊敬的会员：{{username}} 欢迎您!</h2>
                        </div>
                    </div>
                </div>
                <div class="mr-detail">
                    <div class="mr-tab clearfix">
                        <a class="on">联系客服填写</a>
                    </div>
                    <div class="me-box me-box1">
                        <div class="me-dl" style="display:block;">
                            <div class="me-one">
                                <div class="accForm">
                                    <form action="" enctype="multipart/form-data" name="editM" method="post"
                                          onsubmit="return checkpost();">

                                        <div class="afl clearfix">
                                            <label class="fl">手机号码</label>
                                            <div class="af-r fl dInline">
                                                <input type="text" class="ar-txt" name="mobile"
                                                       v-model="contactDTO.phone"
                                                       placeholder="请输入手机号码"
                                                       value="">
                                            </div>
                                        </div>

                                        <div class="afl clearfix">
                                            <label class="fl">用户名</label>
                                            <div class="af-r fl dInline">
                                                <input type="text" class="ar-txt" name="realname"
                                                       v-model="contactDTO.username"
                                                       placeholder="请输入用户名" value="">
                                            </div>
                                        </div>

                                        <div class="afl clearfix">
                                            <label class="fl">订单号</label>
                                            <div class="af-r fl dInline">
                                                <input type="text" class="ar-txt" name="email"
                                                       v-model="contactDTO.orderId"
                                                       placeholder="请输入订单号"
                                                       value="">
                                            </div>
                                        </div>

                                        <div class="afl clearfix">
                                            <label class="fl">反馈内容</label>
                                            <div class="af-r fl dInline">
                                                <input type="text" class="ar-txt" name="email"
                                                       v-model="contactDTO.content"
                                                       placeholder="请输入需要反馈的内容"
                                                       value="">
                                            </div>
                                        </div>

                                        <div class="afl clearfix">
                                            <label class="fl">
                                            </label>
                                            <div class="af-r fl dInline">
                                                <input type="button" value="提交" class="ar-btn"
                                                       @click="contactCustomer">
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="clear_fix"></div>
<script type="text/javascript" src="script/3c-menu.js"></script>
<script type="text/javascript" src="script/lg_reg.js"></script>

</script>
<script>
    function checkpost() {
        var realname = editM.realname.value;//手机号
        var gender = editM.gender.value;//验证码
        var email = editM.email.value;//姓名
        var Yemail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; //邮箱验证
        var url = '/Member/manage/channel/7/list/15';
        if (realname.length > 10) {
            alert("姓名要不得大于10个字符");
            editM.realname.focus();
            return false;
        }
        if (!Yemail.exec(email) && email != '') {
            alert("邮箱格式不正确");
            editM.email.focus();
            return false;
        }
        $.ajax({
            type: "POST",
            url: url,
            data: {realname: realname, gender: gender, email: email},
            dataType: "json",
            success: function (data) {
                alert(data.msg);
            }
        });
        return false;
    }

    function checkPasspost() {
        var password = editP.password.value;//性别
        var password1 = editP.password1.value;//密码
        var password2 = editP.password2.value;//密码
        var Ypass = /\S{6,}/;//密码验证
        var url = '/Member/manage/channel/7/list/15';
        if (!password1) {
            alert("请输入新密码");
            editP.password1.focus();
            return false;
        }
        if (!password2) {
            alert("请重复输入新密码");
            editP.password2.focus();
            return false;
        }
        if (password1 != password2) {
            alert("两次新密码输入不同");
            editP.password1.focus();
            return false;
        }
        if (!Ypass.exec(password1)) {
            alert("密码格式不正确，必须以字母开头的6-16 字母，数字");
            editP.password1.focus();
            return false;
        }
        $.ajax({
            type: "POST",
            url: url,
            data: {password: password, password1: password1},
            dataType: "json",
            success: function (data) {
                alert(data.msg);
            }
        });
        return false;
    }
</script>

<script type="text/javascript">
    new Vue({
        el: "#contact",
        data: {

            // 联系客服
            contactDTO: {
                username: '',
                phone: '',
                content: '',
                orderId: ''
            },
            //用来登录后展示用户名
            username: ""

        },

        methods: {

            // 联系客服
            contactCustomer() {
                if (!this.contactDTO.phone) {
                    alert("手机号码不能为空");
                    return;
                }
                if (!this.contactDTO.username) {
                    alert("用户名不能为空");
                    return;
                }
                this.$http.put("/customerService", this.contactDTO)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            alert(result.message);
                            location.reload();
                        } else {
                            alert(result.message);
                        }
                    }).catch(result => {
                    alert("网络错误，请重新提交");
                })

            },
        },

        mounted() {

            //如果localStorage已经有值，此时应该是登录状态
            var loginUser = localStorage.getItem("loginUser");
            if (loginUser) {
                loginUser = JSON.parse(loginUser);
                this.username = loginUser.username;
                //展示登出按钮
                $("#loginBefore").hide();
                $("#loginAfter").show();
            }
        }

    })
</script>

</body>
</html>

